<!-- 高德地图坐标拾取示例 -->
<template>
	<div class="box">
    <!-- 当需要显示或者取范围的坐标时需要加上属性 :coordinateType="false"，单点坐标则无需加 -->
		<map-util @getCoordinate="getCoordinate" :polygonArr="data.coordinate1"></map-util>
	</div>
  <!-- 单坐标切换按钮 -->
  <zh-button class="btn" @click="onClick">点击切换坐标</zh-button>
</template>
<script lang="ts" setup name="modelVue3">
//------------------定义子组件---------------------------

//------------------接收传入参数(组件)-------------------

//------------------初始化------------------------------
onMounted(() => {});

//------------------内部变量定义-------------------------
// 主数据
const data = reactive({
  // 单点坐标
  coordinate1: [
    [113.794738, 34.795875]
  ],
  // 区域范围
  coordinate2: [
    [113.794738, 34.795875],
    [113.805552, 34.801655],
    [113.816024, 34.786148]
  ],
});

//------------------定义调用方法-------------------------
// 获取坐标信息（e返回的数据格式为二维数组）
const getCoordinate = (e: any) => {
	console.log('e = ', e);
};
// 单坐标切换
const onClick = () => { 
  let arr = [];
  arr.push([120.237652, 29.264567] as never)
  data.coordinate1 = arr;
}

//------------设置给父组件调用的数据/方法(组件)-----------
</script>
<style lang="scss" scoped>
.box {
	width: 1600px;
	height: 600px;
}

.btn {
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1000;
}
</style>
